<template>
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="fuse-side_top" style="height: 1.8rem" :style="Img">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img18.png"
            alt=""
          /><span style="vertical-align: middle">区域监管</span>
        </div>
        <div class="fuse-main">
          <el-form
            inline
            :model="form"
            ref="form"
            label-width="100px"
            size="mini"
          >
            <el-form-item label="" prop="psAreaName">
              <el-select
                v-model="form.psAreaName"
                placeholder="请选择或输入区域"
                style="width: 320px"
                filterable
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in psAreaNamelist"
                  :key="item.psAreaCode"
                  :label="item.psAreaName"
                  :value="item.psAreaCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getareaData"
            ></el-button>
          </el-form>
          <ul class="area_show">
            <li @click="getpersonList">区域人数:{{ area.personNum }}</li>
            <li>区域报警:{{ area.alarmNum }}</li>
          </ul>
        </div>
      </div>
      
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">人员定位</span>
          <i class="iconfont" @click="getpersonList">&#xe66e;</i>
        </div>
        <div class="fuse-main">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5" style="width: 100%">
          <el-table :data="personData" class="backtable" height="250px">
            <!-- <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="psPersonName"
              label="姓名"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="psPersonDept"
              label="部门"
              show-overflow-tooltip
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="psStationLocation"
              label="位置"
              show-overflow-tooltip
               width="120"
            >
            </el-table-column>
            <el-table-column label="人员轨迹" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="Personneltrack(scope.row)"
                  ><i class="iconfont icon-huizhiguiji"></i
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          </happy-scroll>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: middle">安全监测</span>
          <i class="iconfont" @click="gettransList">&#xe66e;</i>
        </div>
        <div class="fuse-main" style="margin-bottom: 0.1rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5" style="width: 100%">
          <el-table :data="tableData" class="backtable" height="2.5rem" style="width: 100%">
            <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ssTransducerPoint"
              label="监测点"
              show-overflow-tooltip
               width='110px'
            >
            </el-table-column>
            <el-table-column
              prop="ssTransducerValue"
              label="实时监测值"
              show-overflow-tooltip
              width='110px'
            >
            </el-table-column>
            <el-table-column
              prop="ssTransducerStateName"
              label="状态"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          </happy-scroll>
        </div>
      </div>
    </div>
    <div class="fuse-right-side">
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">调度通讯</span>
        </div>
        <div class="fuse-main">
           <happy-scroll color="rgba(0,0,0,0.5)" size="5" style="width: 100%">
          <el-table :data="phoneData" class="backtable" height="2.5rem">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="dtAddress"
              label="调度地点"
              show-overflow-tooltip
              align="center"
               width="160"
            >
            </el-table-column>
            <!-- <el-table-column prop="dtStatus" label="状态" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.dtStatus == 1 ? '在线' : '停用' }}
              </template>
            </el-table-column> -->
            <el-table-column
              prop="dtPhone"
              label="联系方式"
              show-overflow-tooltip
              width="150"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="psPersonCard"
              label="操作"
              show-overflow-tooltip
            >
              <template slot-scope="">
                <el-button type="text" size="mini"
                  ><i class="el-icon-phone-outline"></i
                ></el-button>
              </template>
            </el-table-column> -->
          </el-table>
           </happy-scroll>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img19.png"
            alt=""
          /><span style="vertical-align: middle">AI/工业视频</span>
        </div>
        <div class="fuse-main" style="display: flex; overflow: hidden">
          <div class="manage" style="width: 2.4rem">
            <!-- <video-player
              class="video-player vjs-custom-skin"
              :playsinline="true"
              style="border: 1px solid #229d9e"
              :options="gyurl | videoOption"
            >
            </video-player> -->
            <video id="video" autoplay width="100%" height="80%" style="border:1px solid #53738f"></video>
            <h5><i></i>{{ gyname }}</h5>
          </div>
          <div class="aivideo" style="flex: 1; margin-left: 0.1rem">
            <el-carousel
              direction="vertical"
              :autoplay="auto"
              indicator-position="none"
            >
              <template
                v-for="(item, index) in Math.ceil(gyvideoData.length / 2)"
              >
                <el-carousel-item :key="index + 'table'">
                  <ul class="gyvideolist">
                    <li
                      v-for="(data, index1) in gyvideoData.slice(
                        index * 2,
                        item * 2
                      )"
                      :key="index1"
                      @click="getupvideourl(data)"
                    >
                      <img src="@/assets/images/img33.png" />
                      <div class="video-title"><i></i>{{ data.videoName }}</div>
                    </li>
                  </ul>
                </el-carousel-item>
              </template>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">广播系统</span>
        </div>
        <div class="fuse-main">
           <happy-scroll color="rgba(0,0,0,0.5)" size="5" style="width: 100%">
          <el-table :data="airData" class="backtable" height="2rem">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="areacode" label="编号" show-overflow-tooltip width="120">
            </el-table-column>
            <el-table-column
              prop="broadcastAddress"
              label="地点"
              show-overflow-tooltip
              width="130"
            >
            </el-table-column>
            <el-table-column
              prop="broadcastStatus"
              label="状态"
              show-overflow-tooltip
              width="80px"
            >
              <template slot-scope="scope">
                {{ scope.row.broadcastStatus == 0 ? '正常' : '停用' }}
              </template>
            </el-table-column>
          </el-table>
           </happy-scroll>
        </div>
      </div>
    </div>
    <el-dialog width="60%" title="安全监测" :visible.sync="transShow">
      <el-table :data="tableData" height="5rem" class="backtable">
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="监测点"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValue"
          label="实时监测值"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="csDataTime" label="时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="ssTransducerStateName"
          label="状态"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="人员轨迹" :visible.sync="personShow">
      <el-table :data="personData" height="6rem" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psPersonName"
          label="姓名"
          show-overflow-tooltip
          width="80px"
        >
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psPersonDuty"
          label="职务"
          show-overflow-tooltip
          width="100px"
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      width="75%"
      :title="this.name + '轨迹列表'"
      :visible.sync="psPersonShow"
    >
      <el-table :data="psPersonData" height="6rem" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psStationName"
          label="分站名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="分站位置"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="time" label="入站时间" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
import { WebScoket } from '@/api/websocket.js'
import { listVideo,listurl } from '@/api/video/sysVideoData.js'
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'videojs-contrib-hls'
import "../../../../public/adapter.min.js";
import "../../../../public/webrtcstreamer.js";
export default {
  mixins: [WebScoket],
  //components: { videoPlayer,HappyScroll},
  components: { HappyScroll},
  data() {
    return {
      form: {
        psAreaName: null
      },
      airform: {
        desc: null
      },
      area: {
        alarmNum: null,
        personNum: null
      },
      psAreaNamelist: [],
      personData: [],
      phoneData: [],
      airData: [],
      auto: true,
      autoEquipments: [],
      equipmentData: [],
      websocketData: [],
      websocketData1: [],
      equipmentType: true,
      autoequipmentType: false,
      transShow: false,
      personShow: false,
      uuid: null,
      num: 0,
      Img: {
        backgroundImage: 'url(' + require('@/assets/images/img13.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      psPersonData: [],
      psPersonShow: false,
      name: '',
      gyurl: '',
      gyname: '',
      gyvideoData: [],
      tableData: [],
      ids:{
        id:""
      }
    }
  },
  filters: {
    videoOption(val) {
      return {
        live: false,
        // preload: 'auto',
        loop: true,
        autoplay: true,
        language: 'zh-CN',
        aspectRatio: '16:8',
        fluid: true,
        sources: [
          {
            src: val // url地址
          }
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        flash: {
          hls: {
            withCredentials: false
          }
        }
      }
    }
  },
  mounted: function() {
    this.webValue = '/net/websocket/personResult/' + this.uuid
    this.initWebSocket()
    this.webValue1 = '/net/websocket/safeResult/' + this.uuid
    this.initWebSocket1()
   //  this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//192.168.19.233:8000')
  },
  destroyed() {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    websocketonmessage(e) {
      this.websocketData = JSON.parse(e.data)
      if (this.form.psAreaName == null) {
        this.personData = this.websocketData
        const length = this.websocketData.length
        this.area.personNum = length
      } else {
        var newList = []
        this.websocketData.forEach(item => {
          if (item.psAreaCode === this.form.psAreaName) {
            newList.push(item)
          }
        })
        this.personData = newList
        const length = newList.length
        this.area.personNum = length
        return newList
      }
    },
    websocketonmessage1(e) {
      this.websocketData1 = JSON.parse(e.data)
      console.log(this.websocketData1)
      if (this.form.psAreaName == null) {
        this.tableData = this.websocketData1
        const length = this.websocketData1.length
        this.area.alarmNum = length
      } else {
        var newList = []
        this.websocketData1.forEach(item => {
          if (item.psAreaCode === this.form.psAreaName) {
            if (item.ssTransducerStatusName == '报警') {
              newList.push(item)
            }
          }
        })
        this.tableData = newList
        const length = newList.length
        this.area.alarmNum = length
        return newList
      }
    },
    getdatalist() {
      this.$http.get('/staff/areaInfo/home').then(res => {
        if (res.code === 200) {
          this.uuid = res.data.uuid
          this.area.alarmNum = res.data.alarmNum
          this.area.personNum = res.data.personNum
          this.tableData = res.data.transList
          this.personData = res.data.staffList
          console.log(this.personData)
          this.phoneData = res.data.phoneList
          this.airData = res.data.broadcastsList
          // if (res.data.equipmentData !== null) {
          //   this.equipmentType = true
          //   this.autoequipmentType = false
          // } else {
          //   this.equipmentType = false
          //   this.autoequipmentType = true
          // }
          // this.autoEquipments = res.data.autoEquipments
          // this.equipmentData = res.data.equipmentData
          this.psAreaNamelist = res.data.areaList
        }
      })
      this.$http
        .post('/sys/AutoEquipment/list', { pageNum: 1, pageSize: 1000 })
        .then(res => {
          if (res.code === 200) {
            this.equipmentData = res.rows
          }
        })
    },
    getareaData() {
      this.$http
        .get('/staff/areaInfo/home?areaCode=' + this.form.psAreaName)
        .then(res => {
          if (res.code === 200) {
            this.area.alarmNum = res.data.alarmNum
            this.area.personNum = res.data.personNum
            this.tableData = res.data.transList
            this.personData = res.data.staffList
            this.phoneData = res.data.phoneList
            this.airData = res.data.broadcastsList
            // if (res.data.equipmentData !== null) {
            //   this.equipmentType = true
            //   this.autoequipmentType = false
            // } else {
            //   this.equipmentType = false
            //   this.autoequipmentType = true
            // }
            // this.autoEquipments = res.data.autoEquipments
            // this.equipmentData = res.data.equipmentData
            this.psAreaNamelist = res.data.areaList
          }
        })
    },
    gettransList() {
      this.transShow = true
    },
    getpersonList() {
      this.personShow = true
    },
    Personneltrack(row) {
      this.psPersonData = []
      this.psPersonShow = true
      this.name = ''
      var psPersonCard = row.psPersonCard
      this.$http
        .get('/staff/staffData/selectTrack?psPersonCard=' + psPersonCard)
        .then(res => {
          if (res.code == 200) {
            this.psPersonData = res.data.list
            this.name = row.psPersonName
          }
        })
    },
    getvideolist() {
      this.gyvideoData = []
      // 工业视频信息

      listVideo().then(res => {
        if (res.code == 200) {
          this.gyvideoData = res.data
          this.gyname = res.data[0].videoName
          this.getupvideourl(res.data[0])
         // this.gyurl = res.data[0].vurl
					//this.webRtcServer.connect( res.data[0].vurl)
        }
      })
    },
    // gyvideoShow(data) {
    //   console.log(data)
    //   this.gyname = data.videoName
    // },
   getupvideourl(item){
      this.ids.id=item.id
      this.gyname = item.videoName
      listurl(this.ids).then(res=>{
        if(res.code == 200){
				  this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//192.168.19.233:8000')
					this.webRtcServer.connect(res.data.vurl)
        }
      })
    },
  },
  	beforeDestroy() {
	this.webRtcServer.disconnect()
	this.webRtcServer = null
},
  created() {
    this.getdatalist()
    this.getvideolist()
    this.$emit('Gisval', 'jianKong')
  }
}
</script>

<style lang="scss">
.case-right-side {
  box-sizing: border-box;
  padding: 10px;
}
.el-textarea__inner {
  height: 120px;
  background: #2b286f;
  border: 1px solid rgba(60, 177, 195, 0.37);
}
</style>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background: url('../../../assets/img/dialogback.png') no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
.area_show {
  border: 1px solid #254163;
  width: 100%;
  border-radius: 4px;
  display: flex;
  li {
    flex: 1;
    text-align: center;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
  }
  li:first-child {
    border-right: 1px solid #254163;
  }
}
.fuse-main {
  box-sizing: border-box;
  padding: 10px;
}
.gyvideolist {
  display: flex;
  flex-direction: column;
  li {
    flex: 1;
    cursor: pointer;
    img {
      width: 100%;
    }
    .video-title {
      width: 100%;
      font-size: 0.14rem;
      line-height: 0.35rem;
      font-weight: 550;
      letter-spacing: 2px;
      color: #a4bec7;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      i {
        display: inline-block;
        width: 0.13rem;
        height: 0.13rem;
        background: #45e2f9;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
    }
  }
}
.manage {
  position: relative;
  h5 {
    font-size: 0.14rem;
    line-height: 0.35rem;
    font-weight: 550;
    letter-spacing: 2px;
    color: #a4bec7;
    i {
      display: inline-block;
      width: 0.13rem;
      height: 0.13rem;
      background: #45e2f9;
      border-radius: 50%;
      margin-right: 0.1rem;
    }
  }
}
::v-deep .el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-select-dropdown__item {
  color: #fff !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #1a4c99 !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
</style>
<style>
/* .el-scrollbar__wrap {
  overflow: scroll !important;
  height: 100% !important;
  background: #16243f;
}
::v-deep .el-select-dropdown__list {
  background: #16243f !important;
  border: 1px solid #3d3f8b !important;
}
.el-popper[x-placement^='bottom'] {
  margin-top: 12px !important;
  background: #16243f !important;
  border: 1px solid #3d3f8b !important;
} */
</style>